<template>
    <div class="com-container">
        <div class="com-chart" ref="ref_chart"></div>
    </div>
</template>
<script>
export default {
    name:'seller',
    data(){
        return{
            chartInstance:null, //初始化echarts的对象
            allData:null,//服务器请求回来的数据
            currentPage:1,//当前页
            totalPage:null, //总的页数
            timerId:null, //定时器id
        }
    },
    created(){
        this.$socket.registerCallBack('sellerData',this.getData);
    },
    mounted(){
        this.initChart();
        // this.getData();
        this.$socket.send({
            action:'getData',
            socketType:'sellerData',
            chartName:'seller',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter);
        this.screenAdapter();
    },
    // 组件销毁
    destroyed(){
        clearInterval(this.timerId);
        // 移出window.addEventListener('resize',this.updateAdapter);
        window.removeEventListener('resize',this.screenAdapter);
        // 注销回调函数
        this.$socket.unRegisterCallBack('sellerData');
    },
    methods:{
        // 定义初始化图表的方法initChart()
        initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.ref_chart,'chalk');
            // 拆分option配置项
            const initOption = {
                animationDuration:2000,
                // 配置title
                title:{
                    text:"▎商家销售图表",
                    left:20,
                    top:20
                },
                // 配置整一个坐标的位置
                grid:{
                    top:'20%',
                    left: '3%',
                    bottom:'3%',
                    right:'3%',
                    containLabel:true, //设置距离是否包含文字在内
                },
                xAxis:{
                    type:'value'
                },
                yAxis:{
                    type:'category'
                },
                // 配置tooltip
                tooltip:{
                    trigger:'axis',
                    axisPointer:{
                        type:'line',
                        z:0,
                        lineStyle:{
                            color:"#2d3443"
                        }
                    }
                },
                series:[
                    {
                        type:'bar',
                        label:{
                            show:true,
                            position:'right',
                            textStyle:{
                                color:'white'
                            }
                        },
                        itemStyle:{
                            // 指明渐变的方向
                            // 指明不同百分比之下的颜色
                            color:new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                                // 百分之0状态下的颜色值
                                {
                                    offset:0,
                                    color:'#5052ee'
                                },
                                 // 百分之100状态下的颜色值
                                {
                                    offset:1,
                                    color:'#ab6ee5'
                                }
                            ])
                        }
                    }
                ]
            }
            this.chartInstance.setOption(initOption)
            //给图表绑定鼠标事件
            this.chartInstance.on('mouseover',()=>{
                clearInterval(this.timerId)
            })
            this.chartInstance.on('mouseout',()=>{
                this.startInterval();
            })
        },
        // 定义一个获取服务器方法getData()
        getData(ret){
            // const {data:ret} = await this.$http('seller');
            this.allData = ret;
            this.allData.sort((a,b) => a.value - b.value ); //从小到大排序
            this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1;//计算总的页数
            // console.log(this.totalPage)
            this.updateChart();
            this.startInterval();
        },
        // 更新图表方法updateChart()
        updateChart(){
            const start = (this.currentPage - 1) * 5;
            const end = this.currentPage * 5;
            const pageData = this.allData.slice(start,end)
            const sellerNames = pageData.map( item => item.name );
            const sellerValues = pageData.map( item => item.value );
            // 数据配置项
            const dataOption = {
                yAxis:{
                    data:sellerNames
                },
                series:[
                    {
                        data:sellerValues,
                    }
                ]
            }
            this.chartInstance.setOption(dataOption)
        },
        // 定义一个定时器来切换图表的数据
        startInterval(){
            this.timerId = setInterval(()=>{
                this.currentPage++
                // console.log(this.currentPage);
                if(this.currentPage > this.totalPage){
                    this.currentPage = 1;
                }
                this.updateChart();
            },5000)
        },
        // 实现屏幕适配
        /*
            1.监听窗口的大小的变化
            2.设置适配想数据
            3.调用echarts.resize()方法
        */
       screenAdapter(){
           const titleFontSize = this.$refs.ref_chart.offsetWidth / 100 * 3.6;
           const adapterOption = {
                // 配置title
                title:{
                    textStyle:{
                        fontSize:titleFontSize
                    }
                },
                // 配置tooltip
                tooltip:{
                    axisPointer:{
                        lineStyle:{
                            width:titleFontSize
                        }
                    }
                },
                series:[
                    {
                        barWidth:titleFontSize,
                        itemStyle:{
                            barBorderRadius:[0,titleFontSize / 2,titleFontSize / 2,0]
                        }
                    }
                ]
           }

            //设置数据
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        }
    }
}
</script>
<style lang="less" scoped>
</style>